<template>
	<view>
		<!-- #ifdef APP-PLUS -->
		<view>
			<uni-nav-bar left-icon="arrowleft" @clickLeft="back" title="会员管理" :statusBar='true' :fixed="true"></uni-nav-bar>
		</view>
		<!-- #endif -->
		<view class="vipmanage">
			<view class="vipmanage-title">
				<view @click="onClickSelectIndex(0)" :class="{ 'vipmanage-title-item-active': selectIndex === 0 }" class="vipmanage-title-item">今日新增</view>
				<view @click="onClickSelectIndex(1)" :class="{ 'vipmanage-title-item-active': selectIndex === 1 }" class="vipmanage-title-item">过去一周</view>
				<view @click="onClickSelectIndex(2)" :class="{ 'vipmanage-title-item-active': selectIndex === 2 }" class="vipmanage-title-item">全部会员</view>
			</view>
			<!-- #ifdef APP-PLUS -->
			<scroll-view @scrolltolower="todayList" scroll-y :scroll-with-animation='true' v-show="selectIndex === 0" :style="{ 'display': selectIndex === 0 ? 'flex' : 'none', 'height': appListHeight + 'px' }" class="vipmanage-list">
			<!-- #endif -->
			<!-- #ifndef APP-PLUS -->
			<scroll-view @scrolltolower="todayList" scroll-y :scroll-with-animation='true' v-show="selectIndex === 0" :style="{ 'display': selectIndex === 0 ? 'flex' : 'none', 'height': h5ListHeight + 'px' }" class="vipmanage-list">
			<!-- #endif -->
				<view v-for="item in members_today" :key="item.id" class="vipmanage-list-item">
					<image class="vipmanage-list-item-avatar" :src="item.avatar2"></image>
					<view class="vipmanage-list-item-middle">
						<text class="vipmanage-list-item-middle-name">昵称：{{ item.nickname }}</text>
						<text class="vipmanage-list-item-middle-tel">手机号码：{{ item.phone }}</text>
						<text class="vipmanage-list-item-middle-tel">消费次数：{{ item.totalConsumption }}</text>
						<text class="vipmanage-list-item-middle-tel">推荐人数：{{ item.recommendedNumber }}</text>
					</view>
					<view class="vipmanage-list-item-right">
						<text class="vipmanage-list-item-right-time">注册时间：{{ item.registeredAt }}</text>
						<text class="vipmanage-list-item-right-time">累计消费：¥{{ item.consumptionFrequency }}</text>
						<text class="vipmanage-list-item-right-time">推荐人：{{ item.recommender }}</text>
					</view>
				</view>
			</scroll-view>
			<!-- #ifdef APP-PLUS -->
			<scroll-view @scrolltolower="weekList" :style="{ 'display': selectIndex === 1 ? 'flex' : 'none', 'height': appListHeight + 'px' }" v-show="selectIndex === 1" scroll-y :scroll-with-animation='true' class="vipmanage-list">
			<!-- #endif -->
			<!-- #ifndef APP-PLUS -->
			<scroll-view @scrolltolower="weekList" :style="{ 'display': selectIndex === 1 ? 'flex' : 'none', 'height': h5ListHeight + 'px' }" v-show="selectIndex === 1" scroll-y :scroll-with-animation='true' class="vipmanage-list">
			<!-- #endif -->
				<view v-for="item in members_week" :key="item.id" class="vipmanage-list-item">
					<image class="vipmanage-list-item-avatar" :src="item.avatar2"></image>
					<view class="vipmanage-list-item-middle">
						<text class="vipmanage-list-item-middle-name">昵称：{{ item.nickname }}</text>
						<text class="vipmanage-list-item-middle-tel">手机号码：{{ item.phone }}</text>
						<text class="vipmanage-list-item-middle-tel">消费次数：{{ item.totalConsumption }}</text>
						<text class="vipmanage-list-item-middle-tel">推荐人数：{{ item.recommendedNumber }}</text>
					</view>
					<view class="vipmanage-list-item-right">
						<text class="vipmanage-list-item-right-time">注册时间：{{ item.registeredAt }}</text>
						<text class="vipmanage-list-item-right-time">累计消费：¥{{ item.consumptionFrequency }}</text>
						<text class="vipmanage-list-item-right-time">推荐人：{{ item.recommender }}</text>
					</view>
				</view>
			</scroll-view>
			<!-- #ifdef APP-PLUS -->
			<scroll-view @scrolltolower="allList" :style="{ 'display': selectIndex === 2 ? 'flex' : 'none', 'height': appListHeight + 'px' }" v-show="selectIndex === 2" scroll-y :scroll-with-animation='true' class="vipmanage-list">
			<!-- #endif -->
			<!-- #ifndef APP-PLUS -->
			<scroll-view @scrolltolower="allList" :style="{ 'display': selectIndex === 2 ? 'flex' : 'none', 'height': h5ListHeight + 'px' }" v-show="selectIndex === 2" scroll-y :scroll-with-animation='true' class="vipmanage-list">
			<!-- #endif -->
				<view v-for="item in members_all" :key="item.id" class="vipmanage-list-item">
					<image class="vipmanage-list-item-avatar" :src="item.avatar2"></image>
					<view class="vipmanage-list-item-middle">
						<text class="vipmanage-list-item-middle-name">昵称：{{ item.nickname }}</text>
						<text class="vipmanage-list-item-middle-tel">手机号码：{{ item.phone }}</text>
						<text class="vipmanage-list-item-middle-tel">消费次数：{{ item.totalConsumption }}</text>
						<text class="vipmanage-list-item-middle-tel">推荐人数：{{ item.recommendedNumber }}</text>
					</view>
					<view class="vipmanage-list-item-right">
						<text class="vipmanage-list-item-right-time">注册时间：{{ item.registeredAt }}</text>
						<text class="vipmanage-list-item-right-time">累计消费：¥{{ item.consumptionFrequency }}</text>
						<text class="vipmanage-list-item-right-time">推荐人：{{ item.recommender }}</text>
					</view>
				</view>
			</scroll-view>
		</view>
	</view>
</template>

<script>
	import { config } from '@/utils/config.js';
	import uniNavBar from '@/components/uni-nav-bar/uni-nav-bar.vue'
	export default {
		data() {
			return {
				h5ListHeight: 0,
				appListHeight: 0,
				selectIndex: 0,
				
				// 今日的
				members_today: [],
				page_today: 1,
				size_today: 10,
				total_today: 0,
				totalPage_today: 0,
				// 过去一周的
				members_week: [],
				page_week: 1,
				size_week: 10,
				total_week: 0,
				totalPage_week: 0,
				// 全部的
				members_all: [],
				page_all: 1,
				size_all: 10,
				total_all: 0,
				totalPage_all: 0,
			}
		},
		components: {
			uniNavBar
		},
		onLoad() {
			const token = uni.getStorageSync('d_token')
			if (!token) {
				uni.showToast({
					icon: 'none',
					title: '尚未登录, 请先登录'
				})
				setTimeout(() => {
					uni.removeStorageSync('d_role')
					uni.removeStorageSync('d_memberId')
					uni.removeStorageSync('d_token')
					uni.removeStorageSync('d_openId')
					uni.reLaunch({
						url: '../verificationcodelogin/verificationcodelogin'
					})
				}, 777)
				return false
			}
			this._getMembers_today()
			this._getMembers_week()
			this._getMembers_all()
		},
		onReady() {
			const that = this
			uni.getSystemInfo({
				success: ((res) => {
					let info = uni.createSelectorQuery().select('.vipmanage-title');
					info.boundingClientRect(function(data) {
						that.h5ListHeight = res.windowHeight - data.height // 小程序和H5是可以这么设置，但是到了自定义头部的时候，是不允许这么设置的
						that.appListHeight = res.windowHeight - res.statusBarHeight - 44 - data.height
					}).exec()
				})
			})
		},
		// 下拉刷新
		onPullDownRefresh() {
			if (this.selectIndex === 0) {
				this.members_today = []
				this.page_today = 1
				this.size_today = 10
				this.total_today = 0
				this.totalPage_today = 0
				this._getMembers_today()
			} else if (this.selectIndex === 1) {
				this.members_week = []
				this.page_week = 1
				this.size_week = 10
				this.total_week = 0
				this.totalPage_week = 0
				this._getMembers_week()
			} else if (this.selectIndex === 2) {
				this.members_all = []
				this.page_all = 1
				this.size_all = 10
				this.total_all = 0
				this.totalPage_all = 0
				this._getMembers_all()
			}
		},
		methods: {
			back() {
				uni.navigateBack({})
			},
			todayList() {
				const page1 = this.page_today + 1;
				const totalPage = this.totalPage_today
				if (page1 <= totalPage) {
					this.page_today = page1
					this._getMembers_today()
				} else {
					uni.showToast({
						title: '已经到底部了',
						icon: 'none'
					})
				}
			},
			weekList() {
				const page1 = this.page_week + 1;
				const totalPage = this.totalPage_week
				if (page1 <= totalPage) {
					this.page_week = page1
					this._getMembers_week()
				} else {
					uni.showToast({
						title: '已经到底部了',
						icon: 'none'
					})
				}
			},
			allList() {
				const page1 = this.page_all + 1;
				const totalPage = this.totalPage_all
				if (page1 <= totalPage) {
					this.page_all = page1
					this._getMembers_all()
				} else {
					uni.showToast({
						title: '已经到底部了',
						icon: 'none'
					})
				}
			},
			pageTotal(rowCount, pageSize) {
			  if (rowCount === null || rowCount === "") {
			    return 0;
			  } else {
			    if ((pageSize !== 0) && (rowCount % pageSize === 0)) {
			      return parseInt(rowCount / pageSize)
			    }
			    if ((pageSize !== 0) && (rowCount % pageSize !== 0)) {
			      return parseInt(rowCount / pageSize) + 1
			    }
			  }
			},
			onClickSelectIndex(index) {
				this.selectIndex = index
			},
			// 今日
			_getMembers_today() {
				const page = this.page_today
				const size = this.size_today
				uni.request({
					url: `${config.api_base_url}agent/agentMember/findTodayMembers/${page}/${size}`,
					header: {
						AUTH: 'ROBOT ' + uni.getStorageSync('d_token')
					},
					success: ((res) => {
						let { status, data } = res.data
						if (status.flag === true) {
							this.total_today = data.total
							this.totalPage_today = this.pageTotal(this.total_today, this.size_today)
							for (const item of data.rows) {
								if (item.avatar) {
									item.avatar2 = config.oss_base_url + item.avatar
								}
							}
							this.members_today = this.members_today.concat(data.rows)
						} else {
							this.total_today = 0
							this.totalPage_today = 0
							this.members_today = []
						}
					}),
					fail: (() => {
						uni.showToast({
							icon: 'none',
							title: '请求失败, 网络异常'
						})
					}),
					complete: (() => {
						uni.stopPullDownRefresh()
					})
				})
			},
			// 本周
			_getMembers_week() {
				const page = this.page_week
				const size = this.size_week
				uni.request({
					url: `${config.api_base_url}agent/agentMember/findWeekMembers/${page}/${size}`,
					header: {
						AUTH: 'ROBOT ' + uni.getStorageSync('d_token')
					},
					success: ((res) => {
						let { status, data } = res.data
						if (status.flag === true) {
							this.total_week = data.total
							this.totalPage_week = this.pageTotal(this.total_week, this.size_week)
							for (const item of data.rows) {
								if (item.avatar) {
									item.avatar2 = config.oss_base_url + item.avatar
								}
							}
							this.members_week = this.members_week.concat(data.rows)
						} else {
							this.total_week = 0
							this.totalPage_week = 0
							this.members_week = []
						}
					}),
					fail: (() => {
						uni.showToast({
							icon: 'none',
							title: '请求失败, 网络异常'
						})
					}),
					complete: (() => {
						uni.stopPullDownRefresh()
					})
				})
			},
			// 全部
			_getMembers_all() {
				const page = this.page_all
				const size = this.size_all
				uni.request({
					url: `${config.api_base_url}agent/agentMember/findTotalMembers/${page}/${size}`,
					header: {
						AUTH: 'ROBOT ' + uni.getStorageSync('d_token')
					},
					success: ((res) => {
						let { status, data } = res.data
						if (status.flag === true) {
							this.total_all = data.total
							this.totalPage_all = this.pageTotal(this.total_all, this.size_all)
							for (const item of data.rows) {
								if (item.avatar) {
									item.avatar2 = config.oss_base_url + item.avatar
								}
							}
							this.members_all = this.members_all.concat(data.rows)
						} else {
							this.total_all = 0
							this.totalPage_all = 0
							this.members_all = []
						}
					}),
					fail: (() => {
						uni.showToast({
							icon: 'none',
							title: '请求失败, 网络异常'
						})
					}),
					complete: (() => {
						uni.stopPullDownRefresh()
					})
				})
			},
		}
	}
</script>
<style>
	page {
		background-color: #F7F4F8;
	}
</style>
<style scoped>
	.vipmanage {
		width: 100%;
	}

	.vipmanage-title {
		width: 100%;
		height: 64rpx;
		background-color: #fff;
		box-sizing: border-box;
		padding-left: 16rpx;
		padding-right: 14rpx;
		display: flex;
		align-items: center;
	}

	.vipmanage-title-item {
		width: 33.33%;
		height: 100%;
		display: flex;
		justify-content: center;
		align-items: center;
		font-size: 28rpx;
		font-weight: 600;
		color: rgba(0, 0, 0, 0.85);
	}

	.vipmanage-title-item-active {
		color: #F02230;
		position: relative;
	}

	.vipmanage-title-item-active::after {
		position: absolute;
		content: ' ';
		left: 50%;
		margin-left: -31rpx;
		bottom: -8rpx;
		width: 62rpx;
		height: 4rpx;
		background-color: #F02230;
		border-radius: 2rpx;
	}

	.vipmanage-list {
		width: 100%;
		box-sizing: border-box;
		padding-top: 18rpx;
		padding-left: 16rpx;
		padding-right: 14rpx;
		display: flex;
		flex-direction: column;
	}

	.vipmanage-list-item {
		box-sizing: border-box;
		padding-top: 24rpx;
		padding-left: 36rpx;
		padding-bottom: 20rpx;
		display: flex;
		align-items: flex-start;
		background-color: #fff;
		border-radius: 20rpx;
		margin-bottom: 10rpx;
	}

	.vipmanage-list-item:last-child {
		margin-bottom: 0;
	}

	.vipmanage-list-item-avatar {
		width: 74rpx;
		height: 74rpx;
		border-radius: 50%;
		background-color: red;
		margin-right: 36rpx;
		flex-shrink: 0;
	}

	.vipmanage-list-item-middle {
		display: flex;
		flex-direction: column;
	}

	.vipmanage-list-item-middle-name {
		font-size: 28rpx;
		line-height: 40rpx;
		color: rgba(0, 0, 0, 0.85);
		font-weight: 600;
		margin-bottom: 6rpx;
	}

	.vipmanage-list-item-middle-tel {
		font-size: 24rpx;
		font-weight: 400;
		line-height: 34rpx;
		color: #999;
		margin-bottom: 2rpx;
	}

	.vipmanage-list-item-middle-tel:last-child {
		margin-bottom: 0;
	}

	.vipmanage-list-item-right {
		margin-top: 46rpx;
		margin-left: 18rpx;
		display: flex;
		flex-direction: column;
	}

	.vipmanage-list-item-right-time {
		font-size: 24rpx;
		font-weight: 400;
		line-height: 34rpx;
		color: #999;
		margin-bottom: 2rpx;
	}
</style>
